<template>
	<cu-page-base statusBarbackgroundColor="rgba(0,0,0,0)" :show-head-nab-bg="true" :show-nav-bar="false"
		contentTop="500rpx" head-color="#FFFFFF" :show-cumtom-head="true">
		<template #cumtomHead>
			<view class="cu-w-100 cu-row cu-j-start cu-text-center" :style="{
				height: '44px',
				lineHeight: '44px',
			}
			">
				<view class="cu-px-20"><uni-icons @click="gotoPage('/pages/oauth/account/list/list','navigate')"
						type="gear" color="#FFF" size="24"></uni-icons></view>
				<view class="cu-px-20"><uni-icons type="chatboxes-filled" color="#FFF" size="24"></uni-icons></view>
			</view>
			<view class="cu-w-100 cu-row cu-j-start cu-px-20 cu-mt-30">
				<view class="head-image cu-row cu-a-center cu-j-center">
					<image src="/static/logo.jpg" mode="aspectFill"></image>
				</view>
				<view class="cu-pl-20">
					<block v-if="loginStore && loginStore.userinfo">
						<view class="cu-font cu-w-100 cu-d-flex cu-flex-column cu-flex-wrap cu-j-center"
							style="height: 100%;">
							<view>
								昵称：{{loginStore && loginStore.userinfo && loginStore.userinfo.nickname ? loginStore.userinfo.nickname : ""}}
							</view>
							<view>
								账号：{{loginStore && loginStore.userinfo && loginStore.userinfo.username ? loginStore.userinfo.username : ""}}
							</view>
						</view>
					</block>
					<block v-else>
						<view @click="gotoPage('/pages/oauth/loginbywx/loginbywx','navigate')">
							<view class="cu-font-big cu-pl-20 cu-mt-20">登录 / 注册</view>
							<view class="cu-mt-20">
								<u-button size="mini" shape="circle" text="登录免费合成语音"
									color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" :customStyle="{
								width:'240rpx',
							}"></u-button>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="cu-w-100 cu-row cu-px-20 cu-mt-20 cu-font-lg">
				<u-notice-bar :text="notices" bg-color="rgba(0,0,0,0)" color="#FFFFFF" fontSize="32rpx"></u-notice-bar>
			</view>
		</template>

		<view class="cu-text-main cu-mobile-bottom cu-w-100 cu-position-relative cu-py-20">
			<block v-for="(item,idx) in listData">
				<cu-card-list :key="idx" :cudata="item" @clickCardItem="clickCardItem"></cu-card-list>
				<cu-separator :blank="true" />
			</block>
		</view>
	</cu-page-base>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
				loginStore: state => state.loginStore,
			}),
		},
		data() {
			return {
				notices: ['感谢使用自媒坊配音神器', '我们将陆续推出更多免费功能', '如有意见或建议请发送邮件至zimeifang@outlook.com'],
				listData: [{
						list: [{
								text: '任务赚积分',
								type: 'paperplane-filled',
								showRightIcon: true,
								data: {
									name: "rwzqjf",
									path: "/pages/tabbar/welfare/welfare",
									type: "switchTab"
								}
							},
							{
								text: '积分兑换',
								type: 'shop-filled',
								showRightIcon: true,
								data: {
									name: "exchange",
									path: "/pages/oauth/account/exchange/exchange",
									type: "navigate"
								}
							}
						]
					},
					{
						list: [{
							text: '操作记录',
							type: 'list',
							showRightIcon: true,
							data: {
								name: "czjl",
								path: "/pages/voice/record/list",
								type: "navigate"
							}
						}]
					},
					{
						title: {
							text: '关于自媒坊',
							type: "info-filled",
							data: {
								name: "about",
								path: "/pages/oauth/account/about/about",
								type: "navigate"
							},
							right: {
								text: "v 2.4.0"
							}
						},
						list: [{
								text: '微信公众号',
								type: 'weixin',
								showRightIcon: true,
								data: {
									name: "wxgzh",
									path: "/pages/oauth/account/wxgzh/wxgzh",
									type: "navigate"
								}
							},
							{
								text: '人工客服',
								custom: true,
								type: 'icon-kefu',
								showRightIcon: true,
								data: {
									name: "rgkf",
									path: "/pages/oauth/account/rgkf/rgkf",
									type: "navigate"
								}
							},
						]
					},
				]
			};
		},
		methods: {
			clickCardItem(data) {
				if (data && (data.name === 'rwzqjf' 
					|| data.name === 'rgkf' || data.name === 'wxgzh'
					|| data.name === 'about' || data.name === 'exchange'
					|| data.name === 'czjl')) {
					this.gotoPage(data.path, data.type)
				}
			}
		}
	}
</script>

<style lang="scss">
	.head-image {
		width: 140rpx;
		height: 140rpx;
		border: 1px dashed #FFFFFF;
		border-radius: 50%;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}
</style>